<template>
    <div class="table-page">
        <el-table :data="data" border v-loading="loading" style="width:100%" @selection-change="val => {table.selectionChange && table.selectionChange(val)}">
            <el-table-column v-if="table.selectionChange" type="selection" align="center"></el-table-column>
            <template v-for="item in table.thead">
                <el-table-column v-if="item.buttons && (typeof item.visible == 'function'?item.visible(item):true)" :align="item.align?item.align:'center'" :fixed="item.fixed" :width="item.width" :min-width="item.minWidth" :label="item.label" :key="item.label">
                    <template slot-scope="scope">
                        <template v-for="(btn,index) in item.buttons">
                            <span @click.stop="btn.event(scope.row)" class="operation-btn" :class="btn.operationDesc?'operation-desc':''" v-if="btn.show ? btn.show(scope.row) : true" :key="index">
                                <i :class="typeof btn.icon == 'function' ?btn.icon(scope.row):btn.icon" :title="btn.label"></i>{{btn.icon?'':btn.label}}
                            </span>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="typeof item.visible == 'function' ? item.visible(item):true" :sortable="item.sort" :align="item.align?item.align:'center'" :prop="item.attr" :fixed="item.fixed" :width="item.width" :min-width="item.minWidth" :label="item.label" show-overflow-tooltip :key="item.label">
                    <template slot-scope="scope">
                        <template :class="item.className" v-if="item.filter=='tel'">{{scope.row[item.attr] | telFormat}}</template>
                        <template :class="item.className" v-else-if="item.filter=='money'"><span class="table_price"><template v-if="item.analyze">{{ item.analyze(scope.row) | currency }}</template><template v-else>{{ scope.row[item.attr] | currency }}</template></span></template>
                        <template :class="item.className" v-else-if="item.filter=='date'">{{scope.row[item.attr] | timeFormat('YYYY-MM-DD')}}</template>
                        <template :class="item.className" v-else-if="item.filter=='dateTime'">{{scope.row[item.attr] | timeFormat('YYYY-MM-DD HH:mm:ss')}}</template>
                        <template :class="item.className" v-else-if="item.filter=='link'"><span class="table_link" @click="item.event(scope.row)">{{ scope.row[item.attr]}}</span></template>
                        <template :class="item.className" v-else-if="item.filter=='pic'">
                            <div class="portrait">
                                <!-- <img v-if="getData(scope.row,item.attr)" :src="globaldata.view_Url + getData(scope.row,item.attr)" />
                                <img v-else :src="portrait" /> -->
                            </div>
                        </template>
                        <span :class="typeof item.className == 'function' ?item.className(scope.row):item.className" v-else> {{item.analyze?item.analyze(scope.row): getData(scope.row,item.attr)}}</span>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-pagination background @size-change="page.sizeChange" @current-change="page.currentChange" :current-page="page.pageNo" :page-sizes="page.pageSizes" :page-size="page.pageSize" :pager-count="5" layout="slot, sizes, total, prev, pager, next, jumper" :total="page.total" v-if="page.total > 0 && !hidePage"
        ></el-pagination>
    </div>
</template>

<script>
export default {
    props:{
    table:Object,
    data:Array,
    page:Object,
    loading:Boolean,
    // 操作列为按钮
    operationDesc:{
      type: Boolean,
      default: false
    },
    height:{
      type: Number,
      default: 0
    },
    hidePage:{
      type: Boolean,
      default: false
    }
  },
  data() {
      return {
          portrait: require('@/assets/logo.png'), //默认头像
      }
  },
  methods: {
    getData(row,key){
      const list = key && key.split('.') || [];
      let data = row;
      list.forEach(key=>{
          data = data[key] != null && data[key] != undefined? data[key]: '';
      })
      return data;
    },
  },
}
</script>

<style lang="less">
    // 表格样式
.table-page{
    .el-table th,.el-table--small th,
    .el-table th.is-leaf {    
        padding: 6px 0 !important;
        line-height: 30px !important;
        // background-color: #fbd8cd !important;
        color: #333;
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: #74beda;
    }
    .el-table__fixed-body-wrapper tr.el-table__row:nth-child(even),
    .el-table__body-wrapper tr.el-table__row:nth-child(even) {
      background: #ebf2fa;
    }
    // 分页
    .el-pagination{
      margin-top: 20px;
      text-align: right;
    }
    .pagination {
      margin-bottom: 0 !important;
    }
    .el-table th {
        font-size: 14px;
    }
    .el-table .cell {
        text-align: center;
        line-height: 1;
    }
    .el-table thead{
        color:#fff;
    }
    .iconfont,i{
        font-size: 15px;
    }
    .alink{
        color: #409EFF;
        cursor: pointer;
    }
    .table_price{
        color: #409EFF;
        font-weight: bold;
    }
    .table-file{
        color: #409EFF;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin-bottom: 10px;
        display: block;
        text-decoration: underline;
    }
    .table_qty{
        font-weight: bold;
    }
    .table_link{
      color: rgba(255, 102, 51, 1);
      cursor: pointer;
    }
    .operation-btn{
        padding:5px 10px;
        display:inline-block;
        cursor: pointer;
        color: rgb(0, 121, 254);
    }
    /*操作列为按钮*/
    .operation-desc{
        border-radius: 4px;
        background: #409eff;
        color: #fff;
    }
    .operation-desc:not(:last-child){
        margin-right: 5px;
    }
    .more-btn{
        padding:5px 0;
        display:block;
        cursor: pointer;
    }
    .more_buttons_box{
        display: inline-block;
        width: 16px;
        height: 16px;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%)
    }
    .more_buttons_icon{
        display: inline-block;
        width: 16px;
        height: 16px;
        font-size:16px;
        color:#409eff;
        cursor: pointer;
    }
    /* Chrome Safari */
    .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
        display: none !important; 
    }
    /*头像*/
    .portrait {
        margin: 0 auto;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .tag_btn_min{
        margin-left: 10px;
        min-width: 60px;
        line-height: 1.5;
        display: inline-block;
        padding: 0 10px;
        border-radius: 10px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        // 红色
        &.tab_btn_red{
            background: #ff0700;
        }
        // 黄色
        &.tab_btn_yellow{
            background: #ffff01;
            color: rgb(169, 160, 160);
        }
        // 蓝色
        &.tab_btn_blue{
            background: rgba(255, 102, 51, 1);
        }
        // 橘色
        &.tab_btn_orange{
            background: #ff6600;
        }
        // 灰色
        &.tab_btn_gray{
            background: #bcbcbc;
        }
        // 绿色
        &.tab_btn_green{
            background: rgb(76, 165, 60);
        }
    }
}
</style>